<template>
  <div id="batchEditModal">
    <a-modal v-model:open="open" title="批量编辑图片" @cancel="handleCancel" :footer="false">
      <a-typography-paragraph type="secondary"> * 只对当前页面的图片生效</a-typography-paragraph>
      <a-form
        :model="dataForm"
        name="dataForm"
        autocomplete="off"
        layout="vertical"
        @finish="submit"
      >
        <!--      分类，用自动完成-->
        <a-form-item name="category" label="分类">
          <a-auto-complete
            v-model:value="dataForm.category"
            :options="categoryOptions"
            placeholder="请选择分类"
            allowClear
          />
        </a-form-item>
        <!--      标签，用选择框-->
        <a-form-item name="tags" label="标签">
          <a-select
            v-model:value="dataForm.tags"
            mode="tags"
            style="width: 100%"
            placeholder="请选择标签"
            :options="tagOptions"
            allowClear
          ></a-select>
        </a-form-item>
        <!--      名称,一定要指定name属性-->
        <a-form-item name="nameRule" label="命名规则">
          <a-input
            v-model:value="dataForm.nameRule"
            placeholder="请输入命名规则，输入{序号}可动态生成"
          />
          <a-typography-paragraph type="secondary"> * 例：测试{序号}</a-typography-paragraph>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%">提交</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { batchUserUpdatePicUsingPost, listPictureTagCategoryUsingGet } from '@/api/fileController.ts'
import { message } from 'ant-design-vue'

//存储分类
const categoryOptions = ref<string[]>([])
//存储标签
const tagOptions = ref<string[]>([])
const dataForm = reactive({
  category: '',
  tags: [],
  nameRule: '',
})

//控制是否打开
const open = ref<boolean>(false)

/**
 * 定义属性
 */
interface Props {
  //图片列表
  pictureList: API.PictureVO[]
  //空间ID
  spaceId: string
  //刷新事件
  onSuccess: () => void
}

const props = withDefaults(defineProps<Props>(), {})

/**
 * 关闭
 * @param e
 */
const handleCancel = () => {
  open.value = false
}

/**
 * 打开
 */
const handleOpen = () => {
  open.value = true
}

/**
 * 调用后端获取图片标签的接口
 */
async function listPictureTagCategory() {
  const resp = await listPictureTagCategoryUsingGet()
  if (resp.data.data && resp.data.code === 0) {
    categoryOptions.value = (resp.data.data.categoryList ?? []).map((data: string) => {
      return {
        value: data,
        label: data,
      }
    })
    tagOptions.value = (resp.data.data.tagList ?? []).map((data: string) => {
      return {
        value: data,
        label: data,
      }
    })
  } else {
    console.log('调用后端获取图片标签的接口失败', resp.data.message)
  }
}

/**
 * 提交批量编辑图片请求
 * @param any
 */
async function submit(values: any) {
  const resp = await batchUserUpdatePicUsingPost({
    pictureIdList: props.pictureList.map((picture) => picture.id),
    spaceId: props.spaceId,
    ...values,
  })
  if (resp.data.code === 0 && resp.data.data) {
    message.success('批量更新成功')
    handleCancel()
    //刷新页面
    props.onSuccess?.()
  } else {
    message.error('创建失败' + resp.data.message)
  }
}

/**
 * 暴露给父组件
 */
defineExpose({
  handleOpen,
})

onMounted(() => {
  listPictureTagCategory()
})
</script>
